import React from 'react'
import { Row, Col, Checkbox, Select, InputNumber } from 'antd'
import { PIVOT_CHART_FONT_SIZES, PIVOT_CHART_FONT_STYLE, PIVOT_CHART_LEGEND_TYPE } from 'app/globalConstants'
const Option = Select.Option
import ColorPicker from 'components/ColorPicker'
const styles = require('../Workbench.less')
import { getCorrectInputNumber } from '../../util'
//chart 饼图设置

export interface ISpaceConfig {
  borderRadius: number
  borderColor: string,
  borderWidth: number,
  show: boolean,
  fontSize: string,
  fontWeight: string,
  legendType: string,
  minAngle:number,
  fontColor:string,
}

interface IShadowProps {
  title: string
  config: ISpaceConfig
  onChange: (prop: string, value: any) => void
}

export class SpaceSection extends React.PureComponent<IShadowProps, {}> {

  private checkboxChange = (prop) => (e) => {
    this.props.onChange(prop, e.target.checked)
  }

  private inputNumberChange = (prop) => (value) => {
    this.props.onChange(prop, getCorrectInputNumber(value))
  }

  private selectChange = (prop) => (value) => {
    this.props.onChange(prop, value)
  }

  private colorChange = (prop) => (color) => {
    this.props.onChange(prop, color)
  }

  public render() {
    const { title, config } = this.props
    const {
      borderRadius,
      borderColor,
      borderWidth,
      show,
      fontSize,
      fontColor,
      fontWeight,
      legendType,
      minAngle,
    } = config

    const fontSizes = PIVOT_CHART_FONT_SIZES.map((f) => (
      <Option key={`${f}`} value={`${f}`}>{f}</Option>
    ))

    const fontWeights = PIVOT_CHART_FONT_STYLE.map((f) => (
      <Option key={f.value} value={f.value}>{f.name}</Option>
    ))

    const LegendType = PIVOT_CHART_LEGEND_TYPE.map((f) => (
      <Option key={f.value} value={f.value}>{f.name}</Option>
    ))

    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <div className={styles.blockBody}>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={2}>
              <Checkbox
                checked={show}
                onChange={this.checkboxChange('show')}
              />
            </Col>
            <Col span={6}>中心展示</Col>
            <Col span={6}>中心字体</Col>
            <Col span={10}>
              <Select
                placeholder="中心字体"
                className={styles.blockElm}
                value={fontSize}
                onChange={this.selectChange('fontSize')}
              >
                {fontSizes}
              </Select>
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={6}>字体样式</Col>
            <Col span={6}>
              <Select
                placeholder="字体样式"
                className={styles.blockElm}
                value={fontWeight}
                onChange={this.selectChange('fontWeight')}
              >
                {fontWeights}
              </Select>
            </Col>
            <Col span={6}>
              字体颜色
              </Col>
            <Col span={6}>
              <ColorPicker
                value={fontColor}
                onChange={this.colorChange('fontColor')}
              />
            </Col>
          </Row>

          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={6}>
              边框颜色
              </Col>
            <Col span={6}>
              <ColorPicker
                value={borderColor}
                onChange={this.colorChange('borderColor')}
              />
            </Col>
            <Col span={6}>边框宽度</Col>
            <Col span={6}>
              <InputNumber
                placeholder="borderWidth"
                className={styles.blockElm}
                value={borderWidth}
                onChange={this.inputNumberChange('borderWidth')}
              />
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={6}>边框圆角</Col>
            <Col span={6}>
              <InputNumber
                placeholder="borderRadius"
                className={styles.blockElm}
                value={borderRadius}
                onChange={this.inputNumberChange('borderRadius')}
              />
            </Col>
            <Col span={6}>最小扇区</Col>
            <Col span={6}>
              <InputNumber
                placeholder="borderWidth"
                className={styles.blockElm}
                value={minAngle}
                onChange={this.inputNumberChange('minAngle')}
              />
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
            <Col span={6}>图例类型</Col>
            <Col span={10}>
              <Select
                placeholder="图例类型"
                className={styles.blockElm}
                value={legendType}
                onChange={this.selectChange('legendType')}
              >
                {LegendType}
              </Select>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default SpaceSection
